<template>
    <div>
        <div class="container">
        <!-- 头部时间 -->
        <div class="data-header">
            <div class="headers">
                <div class="title">
                    <span @click="add">X</span>
                    <span>取还车时间</span>
                    <span style="color: #b9c8db;">清空</span>
                </div>
                <div class="time">
                    <div class="two">
                        <p>10月11日 周二</p>
                        <span>13:30</span>
                    </div>
                    <div class="two">
                        <p>10月13日 周四</p>
                        <span>13:30</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 星期 -->
        <div class="week">
            <div class="weeks">
                <ul>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li>六</li>
                    <li>日</li>
                </ul>
            </div>
        </div>
        <div class="month">
            <div class="months">
                <div class="daybox">
                    <h2>10月</h2>
                    <div class="days">
                        <span>&nbsp;</span>
                        <span>&nbsp;</span>
                        <span>&nbsp;</span>
                        <span>&nbsp;</span>
                        <span>&nbsp;</span>
                        <div class="day">1</div>
                        <div class="day">2</div>
                        <div class="day">3</div>
                        <div class="day">4</div>
                        <div class="day">5</div>
                        <div class="day">6</div>
                        <div class="day">7</div>
                        <div class="day">8</div>
                        <div class="day">9</div>
                        <div class="day">10</div>
                        <div class="day">11</div>
                        <div class="day">12</div>
                        <div class="day">13</div>
                        <div class="day">14</div>
                        <div class="day">15</div>
                        <div class="day">16</div>
                        <div class="day">17</div>
                        <div class="day">18</div>
                        <div class="day">19</div>
                        <div class="day">20</div>
                        <div class="day">21</div>
                        <div class="day">22</div>
                        <div class="day">23</div>
                        <div class="day">24</div>
                        <div class="day">25</div>
                        <div class="day">26</div>
                        <div class="day">27</div>
                        <div class="day">28</div>
                        <div class="day">29</div>
                        <div class="day">30</div>
                        <div class="day">31</div>
                    </div>
                </div>
                <div class="daybox">
                    <h2>11月</h2>
                    <div class="days">
                        <span>&nbsp;</span>
                        <div class="day">1</div>
                        <div class="day">2</div>
                        <div class="day">3</div>
                        <div class="day">4</div>
                        <div class="day">5</div>
                        <div class="day">6</div>
                        <div class="day">7</div>
                        <div class="day">8</div>
                        <div class="day">9</div>
                        <div class="day">10</div>
                        <div class="day">11</div>
                        <div class="day">12</div>
                        <div class="day">13</div>
                        <div class="day">14</div>
                        <div class="day">15</div>
                        <div class="day">16</div>
                        <div class="day">17</div>
                        <div class="day">18</div>
                        <div class="day">19</div>
                        <div class="day">20</div>
                        <div class="day">21</div>
                        <div class="day">22</div>
                        <div class="day">23</div>
                        <div class="day">24</div>
                        <div class="day">25</div>
                        <div class="day">26</div>
                        <div class="day">27</div>
                        <div class="day">28</div>
                        <div class="day">29</div>
                        <div class="day">30</div>
                    </div>
                </div>
                <div class="daybox">
                    <h2>12月</h2>
                    <div class="days">
                        <span>&nbsp;</span>
                        <span>&nbsp;</span>
                        <span>&nbsp;</span>
                        <div class="day">1</div>
                        <div class="day">2</div>
                        <div class="day">3</div>
                        <div class="day">4</div>
                        <div class="day">5</div>
                        <div class="day">6</div>
                        <div class="day">7</div>
                        <div class="day">8</div>
                        <div class="day">9</div>
                        <div class="day">10</div>
                        <div class="day">11</div>
                        <div class="day">12</div>
                        <div class="day">13</div>
                        <div class="day">14</div>
                        <div class="day">15</div>
                        <div class="day">16</div>
                        <div class="day">17</div>
                        <div class="day">18</div>
                        <div class="day">19</div>
                        <div class="day">20</div>
                        <div class="day">21</div>
                        <div class="day">22</div>
                        <div class="day">23</div>
                        <div class="day">24</div>
                        <div class="day">25</div>
                        <div class="day">26</div>
                        <div class="day">27</div>
                        <div class="day">28</div>
                        <div class="day">29</div>
                        <div class="day">30</div>
                        <div class="day">31</div>
                    </div>
                </div>
                <div class="daybox">
                    <h2>1月</h2>
                    <div class="days">
                        <span>&nbsp;</span>
                        <span>&nbsp;</span>
                        <span>&nbsp;</span>
                        <span>&nbsp;</span>
                        <span>&nbsp;</span>
                        <span>&nbsp;</span>
                        <div class="day">1</div>
                        <div class="day">2</div>
                        <div class="day">3</div>
                        <div class="day">4</div>
                        <div class="day">5</div>
                        <div class="day">6</div>
                        <div class="day">7</div>
                        <div class="day">8</div>
                        <div class="day">9</div>
                        <div class="day">10</div>
                        <div class="day">11</div>
                        <div class="day">12</div>
                        <div class="day">13</div>
                        <div class="day">14</div>
                        <div class="day">15</div>
                        <div class="day">16</div>
                        <div class="day">17</div>
                        <div class="day">18</div>
                        <div class="day">19</div>
                        <div class="day">20</div>
                        <div class="day">21</div>
                        <div class="day">22</div>
                        <div class="day">23</div>
                        <div class="day">24</div>
                        <div class="day">25</div>
                        <div class="day">26</div>
                        <div class="day">27</div>
                        <div class="day">28</div>
                        <div class="day">29</div>
                        <div class="day">30</div>
                        <div class="day">31</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 页脚功能 -->
        <div class="data-footer">
            <div class="top">
                <div class="tops">
                    <p>
                        <i></i>
                        全天可租
                    </p>
                    <p><i class="imgs"></i>
                        部分时段可租</p>
                </div>
            </div>
            <div class="bottoms">
                <div class="conten">
                    <p>共计<span>2天</span></p>
                    <button>确定</button>
                </div>
                
            </div>
        </div>
    </div>
    </div>
</template>

<script>
    export default {
        methods:{
          add(){
             this.$router.go(-1)
          }
        }
    }
</script>

<style lang="scss">
.data-header {
  width: 100%;
  height: 145px;
  background-color: #fff;
  .headers {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    .title {
      width: 100%;
      height: 20px;
      display: flex;
      justify-content: space-between;
      margin-top: 18px;
    }
    .time {
      width: 100%;
      height: 52px;
      display: flex;
      justify-content: space-between;
      margin-top: 28px;
      .two {
        p {
          font-weight: 600;
        }
        span {
          font-size: 11px;
          line-height: 40px;
        }
      }
    }
  }
}
/* 星期 */
.week {
  width: 100%;
  height: 32px;
  background-color: #f2f2f2;
  .weeks {
    width: 90%;
    margin: 0 auto;
    ul {
      display: flex;
      text-align: center;
      line-height: 32px;
      font-size: 12px;
      justify-content: space-around;
    }
  }
}
.month {
  width: 100%;
  padding-bottom: 150px;
  background-color: #fff;
  .months {
    width: 90%;
    margin: 0 auto;
    .daybox {
      width: 100%;
      display: inline-block;
      h2 {
        font-weight: 400;
        font-size: 18px;
        margin-top: 20px;
        margin-bottom: 46px;
      }
      .days {
        display: flex;
        flex-wrap: wrap;
        span {
          display: block;
          width: 32px;
          height: 32px;
          margin-left: 14px;
          margin-bottom: 50px;
        }
        .day {
          width: 32px;
          height: 32px;
          background-color: #f6f6f8;
          border-radius: 50%;
          text-align: center;
          line-height: 32px;
          font-size: 14px;
          margin-left: 14px;
          margin-bottom: 50px;
        }
      }
    }
  }
}
/* 页脚功能 */
.data-footer {
  width: 100%;
  height: 98px;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  .top {
    width: 100%;
    height: 30px;
    border-top: 1px solid #f5f5f5;
    .tops {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      p {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #c6c6cf;
        margin-left: 15px;
        i {
          display: block;
          width: 15px;
          height: 15px;
          background-color: #dddddd;
          border-radius: 50%;
          margin-right: 5px;
        }
        .imgs {
          width: 15px;
          height: 15px;
          display: block;
          background: url("../assets/img/yuan.png");
          background-size: 100% 100%;
        }
      }
    }
  }
  .bottoms {
    width: 100%;
    height: 68px;
    border-top: 1px solid #f5f5f5;
    .conten {
      width: 90%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-size: 15px;
        font-weight: 200;
        line-height: 68px;
        & > span {
          font-weight: 600;
        }
      }
      button {
        width: 118px;
        height: 45px;
        border-radius: 20px;
        background-color: #00cf97;
        color: #fff;
        font-size: 12px;
        line-height: 45px;
        text-align: center;
        border: none;
      }
    }
  }
}

</style>